<script  setup lang="ts">
import { reactive, ref } from "vue";
//Ts-@ignore
import type { Ref } from "vue";
import topVue from "./components/top.vue";
import bannerVue from "./components/banner.vue";
import notieVue from "./components/notie.vue";
import navVue from "./components/nav.vue";
import minbannerVue from "./components/minbanner.vue";
import { getCategory } from "@/api/home";
import GoodslistVue from "./components/goodsList.vue";
let cateList: Ref<Array<string>> = ref<Array<string>>([]);
getCategory().then((res) => {
  cateList.value = res as Array<string>;
});
</script>

<template>
  <topVue class="top"></topVue>
  <bannerVue class="banner"></bannerVue>
  <main>
    <notieVue class="notice"></notieVue>
    <navVue></navVue>
    <minbannerVue></minbannerVue>
    <div class="detail">
      <ul class="ul "><li v-for="item in cateList" class="target"><p>{{ item }}</p></li></ul>
      <GoodslistVue></GoodslistVue>
    </div>
  </main>
</template>

<style scoped>
main {
  width: 100%;
}
.notice {
  margin-top: 100px;
}
.ul {
  width: 100%;
  margin-top:20px;
  overflow: auto;
  white-space: nowrap;
  color: black;
  background-color: #f7f7f7;
}
li {
  font-size: 18px;
  margin: 0 7.5px;
  display: inline-block;
  line-height: 60px;
  position: relative;
}
.target:active,.target:hover{
   color: green;
}
.detail {
  width: 100%;
  background-color: #f7f7f7;
  min-height: 500px;
}

</style>
